<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 

    <style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
#text{
	width: 250px;height: 400px;border: 1px solid black;
}
.cheng{width: 100%;float: left;}
.cheng img{float: right;}
.cheng span{float: right;}

.qi{width: 100%;float: left;}
.qi img{float: left;}
.qi span{float: left;}

    </style>
</head>
<body>
<div id='text'></div>
<img src="程紫鑫.jpg" id='headImg' width=50 height=50>
<textarea id='te'></textarea>
<input type='button' id='btn' value='发送'>

<script type="text/javascript">
	
	var imgToggle = true;
	headImg.onclick = function(){
		imgToggle = !imgToggle;
		imgToggle?headImg.src = '程紫鑫.jpg':headImg.src = '齐弦.jpg';
	};

	btn.onclick = function(){
		var val = te.value;
		var imgSrc = imgToggle?'程紫鑫.jpg':'齐弦.jpg';
		var oDiv = document.createElement('div');
		oDiv.className = imgToggle?'cheng':'qi';
		oDiv.innerHTML = '<img src='+imgSrc+' width=30 height=30><span>'+val+'</span>';
		if(text.children.length==0){
			text.appendChild(oDiv);
		}
		else{
			text.insertBefore(oDiv,text.children[0])
		}

		te.value = '';
		//text.appendChild(oDiv);
	}

</script>
</body>
</html>